<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>放大镜光标</title>
  <link rel='stylesheet' href='https://unpkg.com/splitting/dist/splitting.css'>
<link rel='stylesheet' href='https://unpkg.com/splitting/dist/splitting-cells.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="card">
	<img class="card-image" src="https://assets.codepen.io/4787486/man-in-suit-portrait.jpg" alt="" />
	<div class="text">
		<h1 class="split-text" data-splitting>You can't go wrong</h1><br>with the right shoes
	</div>
	<div class="try-it">
		🔎
	</div>
	<!-- 放大镜 -->
	<div class="magnifying-glass"></div>
</div>
<!-- partial -->
  <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
<script src='https://unpkg.com/splitting/dist/splitting.min.js'></script>
<script src='https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/Flip.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollToPlugin.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/TextPlugin.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script  src="./script.js"></script>

</body>
</html>
